<template>
  <el-page-header
    title="项目管理"
    content="添加项目"
    icon=""
  >
  </el-page-header>
  <el-form
    ref="projectFormRef"
    :model="projectForm"
    :rules="projectRules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item
      label="标题"
      prop="title"
    >
      <el-input v-model="projectForm.title" />
    </el-form-item>
    <el-form-item
      label="项目介绍"
      prop="introduction"
    >
      <el-input
        resize="none"
        type="textarea"
        :rows="5"
        v-model="projectForm.introduction"
      />
    </el-form-item>
    <el-form-item
      label="项目详情"
      prop="detail"
    >
      <el-input
        resize="none"
        type="textarea"
        :rows="5"
        v-model="projectForm.detail"
      />
    </el-form-item>
    <el-form-item
      label="封面"
      prop="cover"
    >
      <!-- 封装upload上传组件 -->
      <UploadAvatar
        :avatar="projectForm.cover"
        @handle="handleUpload"
      ></UploadAvatar>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="onSubmit"
      >添加项目</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import upload from "@/utils/upload";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import UploadAvatar from "@/components/upload/UploadAvatar.vue";
import { ElMessage } from "element-plus";


const router = useRouter();
const projectFormRef = ref();
const projectForm = reactive({
  title: "",
  introduction: "",
  detail: "",
  cover: "",
  file: null,
});
const projectRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  introduction: [
    { required: true, message: "请输入项目介绍", trigger: "blur" },
  ],
  detail: [{ required: true, message: "请输入项目详情", trigger: "blur" }],
  cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
});
const handleUpload = (file) => {
  projectForm.cover = URL.createObjectURL(file);
  projectForm.file = file;
};
const onSubmit = () => {
  projectFormRef.value.validate(async (value) => {
    if (value) {
      const res = await upload("/adminapi/project/add", projectForm);
      if (res.ActionType === 'OK') {
        ElMessage.success('项目添加成功')
      }
      router.push("/project-manage/projectlist");
    }
  });
};

</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 20px;
}
</style>